<template>
  <transition name="slide">
		<!-- showModal -->
		<!-- 测试时建议先把v-show绑定为true -->
    <div class="modal" v-show="showModal">
      <div class="mask"></div>
      <div class="modal-dialog">
        <div class="modal-header">
          <a href="javascript:;" class="icon-close" @click="$emit('cancel')"></a>
        </div>
        <div class="modal-body">
          <!-- 插槽:预留给自己添加的部分 -->
          <slot name="body"></slot>
        </div>
        <div class="modal-footer">
    
					<div class="modal-attr">
            <div class="attr-box">
							<div class="attr-title">¥{{count*price}}</div>
							<div class="attr-price">
								<text>{{showSize}}</text>
								<text>{{temp}}</text>
								<text>{{sugar}}</text>
							</div>
						</div>
						<div class="count-box">
							<div class="icon-reduce" @click="countButton('-')">-</div>
							<div class="count">{{count}}</div>
							<div class="icon-add" @click="countButton('+')">+</div>
						</div>
          </div>
					<div class="btn-group">
					  <!-- <a href="javascript:;" class="btn" @click="$emit('submit')"></a> -->																					
																								<!-- 回传购物车数量 -->
						<div class="submitButton" @click="$emit('submit',count)">{{sureText}}</div>
						<!-- <router-link to="pages/cart/cart" navType="pushTab" class="btn" >{{sureText}}</router-link> -->
					</div>
				</div>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  name: "modal",
	data(){
		return{
			count:1
		}
	},
  props: {
    // 按钮类型 1:确定按钮
    btnType: String,
    sureText: {
      type: String,
      default: "确定"
    },
		//显示模态框
    showModal: Boolean,
		//价格
		price:{
			type: Number,
			default: 1
		},
		showSize:{
			type: String,
			default: "中",
		}, 
		temp:{
			type: String,
			default: "标准"
		}, 
		sugar:{
			type: String,
			default: "标准"
		},
		//商品数量
		// count:{
		// 	type: Number,
		// 	default: 1
		// }
  },
	methods:{
		countButton(val){
			let that=this
			if(val=="+"){ //如果点加号
				// 如果数量小于99
				if(that.count<99){
					// ++
					that.count++
				}else{
					//否则默认最大99
					that.count=99
				}
			}else if(val=="-"){	//如果点减号
				// 如果数量大于0
				if(that.count>1){ 
					// --
					that.count--
				}else{
					//否则默认为1
					that.count=1
				}
			}
			that.$forceUpdate();
		},
		// 跳转购物车
		// goToCart() {
		// 	this.$Router.push({ name: 'cart', params: { userId: '123' }})
		// }
	},
	updated() {
		// console.log(this.price);
	},
}
</script>
<style lang="scss">
//引入依赖样式
@import "./../assets/scss/config.scss";
@import "./../assets/scss/mixin.scss";
@import "./../assets/scss/modal.scss";
@import "./../assets/scss/button.scss";
</style>